<template>
  <view class="report-detail-container">
    <!-- 顶部导航栏 -->
    <u-navbar
      title="面试报告详情"
      :border="true"
      :placeholder="true"
      :autoBack="true"
    ></u-navbar>
    
    <!-- 主要内容区域 -->
    <scroll-view scroll-y class="content">
      <!-- 报告基本信息 -->
      <view class="report-header">
        <view class="report-title-group">
          <text class="report-position">{{reportData.positionName}}</text>
          <u-tag 
            :text="reportData.overallScore.toFixed(2) + '分'" 
            :type="getScoreTagType(reportData.overallScore)" 
            size="medium"
          />
        </view>
        <view class="report-time">
          <u-icon name="clock" size="28" color="#909399"></u-icon>
          <text>{{formatTime(reportData.createTime)}}</text>
        </view>
      </view>
      
      <!-- 总体评价 -->
      <view class="section">
        <view class="section-title">
          <u-icon name="file-text" size="32" color="#2979ff"></u-icon>
          <text>总体评价</text>
        </view>
        <view class="evaluation-content">
          {{reportData.overallEvaluation}}
        </view>
      </view>
      
      <!-- 优势分析 -->
      <view class="section">
        <view class="section-title">
          <u-icon name="thumb-up" size="32" color="#67c23a"></u-icon>
          <text>优势分析</text>
        </view>
        <view class="evaluation-content">
          {{reportData.strengths}}
        </view>
      </view>
      
      <!-- 劣势分析 -->
      <view class="section">
        <view class="section-title">
          <u-icon name="thumb-down" size="32" color="#f56c6c"></u-icon>
          <text>劣势分析</text>
        </view>
        <view class="evaluation-content">
          {{reportData.weaknesses}}
        </view>
      </view>
      
      <!-- 改进建议 -->
      <view class="section">
        <view class="section-title">
          <u-icon name="attach" size="32" color="#e6a23c"></u-icon>
          <text>改进建议</text>
        </view>
        <view class="suggestion-content">
          <rich-text :nodes="formatSuggestions(reportData.suggestions)"></rich-text>
        </view>
      </view>
      
      <!-- 维度详情 -->
      <view class="section">
        <view class="section-title">
          <u-icon name="grid" size="32" color="#909399"></u-icon>
          <text>维度详情</text>
        </view>
        <view class="dimension-list">
          <view 
            class="dimension-item" 
            v-for="item in reportData.dimensionDetails" 
            :key="item.id"
          >
            <view class="dimension-header">
              <text class="dimension-name">{{item.dimensionName}}</text>
              <u-tag 
                :text="item.score.toFixed(2) + '分'" 
                :type="getDimensionTagType(item.score)" 
                size="mini"
              />
            </view>
            <view class="dimension-weight">权重: {{(item.weight * 100).toFixed(0)}}%</view>
            <view class="dimension-evaluation">{{item.evaluation}}</view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
// import * as echarts from '@/components/ec-canvas/echarts';
import { getReportDetail } from '@/api/interview/report';

export default {
  data() {
    return {
      reportData: {},
      ec: {
        lazyLoad: true
      },
      chart: null
    };
  },
  onLoad(options) {
    if (options.reportId) {
      this.loadReportDetail(options.reportId);
    }
  },
  methods: {
    // 加载报告详情
    async loadReportDetail(id) {
      uni.showLoading({
        title: '加载中...'
      });
      try {
        const res = await getReportDetail(id);
        this.reportData = res.data;
        // this.initChart();
      } catch (error) {
        console.error('加载报告详情失败:', error);
      } finally {
        uni.hideLoading();
      }
    },
    
    // 格式化时间
    formatTime(time) {
      if (!time) return '未知时间';
      return new Date(time).toLocaleString();
    },
    
    // 根据分数获取标签类型
    getScoreTagType(score) {
      if (score >= 80) return 'success';
      if (score >= 60) return 'warning';
      return 'error';
    },
    
    // 根据分数获取维度标签类型
    getDimensionTagType(score) {
      if (score >= 80) return 'success';
      if (score >= 60) return 'warning';
      return 'error';
    },
    
    // 格式化建议内容
    formatSuggestions(suggestions) {
      if (!suggestions) return '';
      return suggestions.replace(/\n/g, '<br/>');
    }
  }
};
</script>

<style lang="scss" scoped>
.report-detail-container {
  height: 100vh;
  width: 100%; /* 确保宽度为100% */
  display: flex;
  flex-direction: column;
  background-color: #f7f8fa;
}

.content {
  flex: 1;
  width: 100%; /* 确保宽度为100% */
  padding: 30rpx;
  padding-bottom: 60rpx;
  box-sizing: border-box; /* 确保内边距不影响总宽度 */
}

.report-header {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  width: 100%; /* 确保宽度为100% */
  box-sizing: border-box; /* 确保内边距不影响总宽度 */
}

.report-title-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  width: 100%; /* 确保宽度为100% */
}

.report-position {
  font-size: 36rpx;
  font-weight: bold;
  color: #303133;
  max-width: 80%; /* 限制文本宽度 */
  overflow-wrap: break-word; /* 确保文本不会超出容器 */
}

.report-time {
  display: flex;
  align-items: center;
  gap: 10rpx;
  font-size: 26rpx;
  color: #909399;
  max-width: 80%; /* 限制文本宽度 */
  overflow-wrap: break-word; /* 确保文本不会超出容器 */
}

.section {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  width: 100%; /* 确保宽度为100% */
  box-sizing: border-box; /* 确保内边距不影响总宽度 */
}

.section-title {
  display: flex;
  align-items: center;
  gap: 15rpx;
  font-size: 32rpx;
  font-weight: 500;
  color: #303133;
  margin-bottom: 20rpx;
  width: 100%; /* 确保宽度为100% */
}

.evaluation-content, .suggestion-content {
  font-size: 28rpx;
  color: #606266;
  line-height: 1.6;
  width: 100%; /* 确保宽度为100% */
  overflow-wrap: break-word; /* 确保文本不会超出容器 */
}

.dimension-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  width: 100%;
}
 
.dimension-item {
  padding: 24rpx;
  border-radius: 12rpx;
  background-color: #ffffff;
  width: 100%;
  box-sizing: border-box;
  border: 1rpx solid #ebeef5; /* 增加边框 */
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); /* 增加阴影 */
}
 
.dimension-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
  width: 100%;
}
 
.dimension-name {
  font-size: 32rpx;
  font-weight: 500;
  color: #303133;
  max-width: 70%;
  overflow-wrap: break-word;
}
 
.dimension-weight {
  font-size: 26rpx;
  color: #909399;
  margin-bottom: 12rpx;
  max-width: 70%;
  overflow-wrap: break-word;
}
 
.dimension-evaluation {
  font-size: 28rpx;
  color: #606266;
  line-height: 1.6;
  width: 100%;
  overflow-wrap: break-word;
  margin-top: 16rpx;
  padding-top: 16rpx;
  border-top: 1rpx solid #f0f0f0; /* 增加分隔线 */
}
</style>
